<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/5
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--格式化的标签库--%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
<%--    引入jQuery--%>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="student_insert.jsp">添加</a>
<button id="btn">批量删除</button>
    <table border="1" width="1000px" >
        <tr>
            <th>
                <input type="checkbox" id="inp">
            </th>
            <th>学生编号</th>
            <th>学生姓名</th>
            <th>学生性别</th>
            <th>学生爱好</th>
            <th>生日</th>
            <th>图像</th>
            <th>操作</th>
        </tr>
<%--        遍历--%>
        <c:forEach items="${studentLists }" var="student" varStatus="xxoo">
            <tr align="center">
                <td>
                    <input type="checkbox" class="inps" value="${student.sid }">
                </td>
                <td>${xxoo.index + 1 }</td>
                <td>${student.sname }</td>
                <td>${student.sex }</td>

                <td>${student.hobby }</td>
                <td>
<%--                    格式化日期   fmt:formatDate 标签
                    value 代表要格式化的数据
                    pattern  代表要格式化的格式
--%>
                    <fmt:formatDate value="${student.sbir }" pattern="yyyy-MM-dd HH:mm:ss"/>
                </td>

<%--                显示图片
    1、浏览器有保护机制，不能直接去访问本地磁盘的图片
    2、去配置一个项目的虚拟路径，到去映射本地的磁盘D://studentpic文件夹
--%>
                <td>
                    <img width="60px" src="http://localhost:8080/studentpic/${student.photo }" alt="">
                </td>

                <td>
                    <a href="studentServlet?mark=deleteStudentBySid&sid=${student.sid }&photo=${student.photo }">删除</a>
<%--                    修改数据的回显   通过sid去数据库查询该学生信息 带到修改页面进行回显--%>
                   || <a href="studentServlet?mark=queryStudentBySid&sid=${student.sid }">修改</a>
                </td>

            </tr>
        </c:forEach>
    </table>

    <span>当前页:${pt.currentPage }</span>  &nbsp;&nbsp;&nbsp;&nbsp;
    <span>总条数:${pt.totalSize }</span>  &nbsp;&nbsp;&nbsp;&nbsp;
    <span>总页数:${pt.totalPage }</span>  &nbsp;&nbsp;&nbsp;&nbsp;

    <a href="studentServlet?mark=pageQueryStudent">首页</a>   &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="studentServlet?mark=pageQueryStudent&currentPage=${pt.prePage }">上一页</a> &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="studentServlet?mark=pageQueryStudent&currentPage=${pt.nextPage }">下一页</a> &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="studentServlet?mark=pageQueryStudent&currentPage=${pt.totalPage }">尾页</a>   &nbsp;&nbsp;&nbsp;&nbsp;
</body>
</html>
<script>
    //给第一个复选框一个点击事件
    $("#inp").click(function() {
        //获取自己的选中状态
        var b = $(this).prop("checked");
        $(".inps").prop("checked",b);
    })

    //批量删除
    $("#btn").click(function() {
        //确认框
        if(confirm("你确定吗?")) {
            //批量删除 sql   delete from student where sid in(1,2,3,4,5);

            var str = "";
            //遍历
            $(".inps").each(function() {
                //判断是否选中
                if($(this).prop("checked")) {
                    //拿到每个复选框的value
                    str += "," + $(this).val();
                }

            })
            // ,1,2,3,4,5
            if(str == "") {
                alert("别瞎jb乱点");
            }else {
                //才截取
                str = str.substring(1);
                //请求后台
                location.href="studentServlet?mark=batchDeleteStudent&sids=" + str;

            }


        }else {
            alert("已经取消");
        }
    })
</script>
